<!--jiaoyi.less-->
<template>
	<section id="cicangList">
		<HeaDer :Title='titleData'></HeaDer>
		<section class="cicangWarp">
			<ul class="lisWarp">
				<li class="list">
					<h2 v-if="!userData.tongji.totaldeposit">--</h2>
					<h2 v-else>{{userData.tongji.totaldeposit}}</h2>
					<span>动态权益</span>
				</li>
				<li class="list">
					<h2 v-if="!userData.tongji.keyong_price">--</h2>
					<h2>{{userData.tongji.keyong_price}}</h2>
					<span>可用资金</span>
				</li>
				<li class="list">
					<h2 v-if="!userData.tongji.totalusdt">--</h2>
					<h2>{{userData.tongji.totalusdt}}</h2>
					<span>冻结保证金</span>
				</li>
			</ul>
			<ul class="lisWarp">
				<li class="list">
					<h2 v-if="!userData.tongji.yingkui">--</h2>
					<h2>{{userData.tongji.yingkui}}</h2>
					<span>浮动盈亏</span>
				</li>
				<li class="list">
					<h2 v-if="!userData.tongji.pingcang">--</h2>
					<h2>{{userData.tongji.pingcang}}</h2>
					<span>平仓盈亏</span>
				</li>
				<li class="list">
					<h2 v-if="!userData.tongji.risk">--</h2>
					<h2>{{userData.tongji.risk}}</h2>
					<span>风险率</span>
				</li>
			</ul>
		</section>
		<section class="totleList">
			<van-tabs @click="changeNav">
				<van-tab title="持仓">
					<ul class="cicangWarp">
						<li class="cicangNav">
							<span>名称</span>
							<span>类型</span>
							<span>持仓量</span>
							<span>总金额</span>
							<span class="twoPrice">买入价/现价</span>
							<span>浮动盈亏</span>
							<span>保证金</span>
							<span>手续费</span>
							<span>过夜费</span>
							<span>操作</span>
						</li>
						<li class="cicangNav cicangList" v-for="(v,index) in userData.cicang" :key='index'>
							<span>{{v.pname}}</span>
							<span v-if="v.otype == 1" class="buy">买入</span>
							<span v-if="v.otype == 2" class="sell">卖出</span>
							<span>{{v.buynum}}</span>
							<span>{{v.totalprice}}</span>
							<span class="twoPrice">{{v.buyprice}}/{{v.newprice}}</span>
							<span>{{v.fdyk}}</span>
							<span>{{v.deposit}}</span>
							<span>{{v.sxfee}}</span>
							<span>{{v.dayfee}}</span>
							<span class="pingcangBtn" @click="pichang(v.hold_id,v.newprice)">平仓</span>
						</li>
						<p class="noList" v-show="userData.cicang.length==0">暂无数据</p>
					</ul>
				</van-tab>
				<van-tab title="委托">
					<ul class="weituoListWarp">
						<li class="weituoList" v-for="(v,index) in userData.weituo">
							<nav>
								<p class="buyWarp">
									<span v-if="v.otype == 1" class="sell">买入</span>
									<span v-if="v.otype == 2" class="buy">买出</span>
									<span>{{v.pname}}</span>
									<span>{{v.addtime}}</span>
								</p>
								<p class="cancellations">
									<span @click="chedan(v.en_id)">撤单</span>
								</p>
							</nav>
							<section class="weituoDataWarp">
								<section class="weituoData">
									<h2>价格</h2>
									<span>{{v.buyprice}}</span>
								</section>
								<section class="weituoData">
									<h2>数量</h2>
									<span>{{v.buynum}}</span>
								</section>
								<section class="weituoData">
									<h2>实际成交</h2>
									<span>{{v.buynum}}</span>
								</section>
							</section>
						</li>
					</ul>
					<p class="noList" v-show="userData.weituo.length==0">暂无数据</p>
				</van-tab>
				<van-tab title="成交">
					<ul class="chengjiaoListWarp">
						<li class="chengjiaoList" v-for="(v,index) in userData.chengjiao" :key='index'>
							<nav>
								<p class="buyWarp">
									<span v-if="v.otype == 1" class="sell">买入</span>
									<span v-if="v.otype == 2" class="buy">买出</span>
									<span>{{v.pname}}</span>
									<span>{{v.selltime}}</span>
								</p>
							</nav>
							<section class="chengjiaoDataWarp">
								<section class="chengjiaoData">
									<h2>价格</h2>
									<span>{{v.buyprice}}</span>
								</section>
								<section class="chengjiaoData">
									<h2>数量</h2>
									<span>{{v.buynum}}</span>
								</section>
								<section class="chengjiaoData">
									<h2>实际成交</h2>
									<span>{{v.buynum}}</span>
								</section>
							</section>
						</li>
					</ul>
					<p class="noList" v-show="userData.chengjiao.length==0">暂无数据</p>
				</van-tab>
			</van-tabs>
		</section>
	</section>
</template>

<script>
	import HeaDer from "../common/header.vue";
	export default {
		data() {
			return {
				//头部数据
				titleData: {
					name: '交易ID：123456',
					flat: 1
				},
				userData: {
					cicang: [], //持仓数据
					weituo: [], //委托数据
					chengjiao: [], //成交数据
					tongji: [], //统计数据
				},
				setTime:''  //定时器
			}
		},
		methods: {
			//获得统计信息
			getData() {
				var _this = this;
				_this.titleData.name = '交易ID : ' + sessionStorage.account;
				_this.$http.post(_this.$host.tongji, {
					mobile: sessionStorage.mobile
				}).then(function(data) {
					if(data.status == '200') {
						_this.userData.tongji = data.data.data
					}
				}).catch(function() {})
			},
			//成交委托持仓切换执行函数
			changeNav(index) {
				this.getList(index);
			},
			//获得持仓委托成交 数据执行函数
			getList(index) {
				var _this = this;
				var urls = null;
				switch(index) {
					case 0:
						urls = _this.$host.chicang;
						break;
					case 1:
						urls = _this.$host.weituo;
						break;
					case 2:
						urls = _this.$host.chengjiao;
						break;
				}
				_this.$http.post(urls, {
					mobile: sessionStorage.mobile
				}).then(function(data) {
					if(data.status == 200) {
						switch(index) {
							case 0:
								_this.userData.cicang = data.data.data;
								break;
							case 1:
								_this.userData.weituo = data.data.data;
								break;
							case 2:
								_this.userData.chengjiao = data.data.data;
								break;
						}
					}

				}).catch(function() {})
			},
			//点击平仓执行函数
			pichang(order_id, newprice) {
				//需要传入order_id 和最新价格
				var _this = this;
				_this.$dialog.confirm({
					title: '提示',
					message: '您确定要平此仓?'
				}).then(() => {
					_this.$public.loading('平仓中...', _this);
					_this.$http.post(_this.$host.pingcang, {
						mobile: sessionStorage.mobile,
						order_id: order_id,
						newprice: newprice
					}).then(function(data) {
						_this.$toast.success(data.data.msg);
						if(data.data.status == '200') {
							//再请求下数据接口 刷新数据
							_this.getList(0);
						}
					}).catch(function() {})

				}).catch(() => {

				});
			},
			//点击撤单执行函数
			chedan(order_id) {
				var _this = this;
				_this.$dialog.confirm({
					title: '提示',
					message: '您确定要撤此单吗？'
				}).then(() => {
					_this.$public.loading('撤单中...', _this);
					_this.$http.post(_this.$host.cancellations, {
						mobile: sessionStorage.mobile,
						order_id: order_id						
					}).then(function(data) {
						_this.$toast.success(data.data.msg);
						if(data.data.status == '200') {
							//再请求下数据接口 刷新数据
							_this.getList(1);
						}
					}).catch(function() {})
				}).catch(() => {
					// on cancel
				});
			}

		},
			// 路由发生变化时
		beforeRouteLeave(to, from, next) {
			clearInterval(this.setTime);
			next()
		},
		components: {
			'HeaDer': HeaDer
		},
		
		created: function() {
			var _this = this;
			_this.getData();
			_this.getList(0);
			//数据三秒刷新一次
			_this.setTime = setInterval(function(){
				_this.getData();
				_this.getList(0);	
			},3000)
			
			
		}
	}
</script>

<style>

</style>